<template>
	<view>
		<cu-custom bgColor="bg-blue">
			<block slot="content"> 工作台</block>
		</cu-custom>
		<swiper class="screen-swiper square-dot bg-blue" :indicator-dots="true" :circular="true" :autoplay="true" interval="2000"
		 duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>

				<view class="cu-list grid col-4 no-border fixed">
			<view @tap="toTodoList" class="circle-button-box">
				<view class="cuIcon-notice text-blue circle-button font-size-35"></view>
				<text>通告</text>
			</view>
			<!-- <view @tap="toHistoryList" class="circle-button-box">
				<view class="cuIcon-roundcheck  text-blue circle-button font-size-35"></view>
				<text>已办事项</text>
			</view> -->
			<!-- <view @tap="toFlowCopyList" class="circle-button-box">
				<view class="cuIcon-copy  text-blue circle-button font-size-35"></view>
				<text>抄送给我</text>
			</view> -->
			<!-- <view @tap="toFlowCopyList" class="circle-button-box">
				<view class="cuIcon-copy  text-blue circle-button font-size-35"></view>
				<text>规章制度</text>
			</view> -->
			<!-- <view @tap="toFlowCopyList" class="circle-button-box">
				<view class="cuIcon-copy  text-blue circle-button font-size-35"></view>
				<text>规章制度</text>
			</view> -->
		</view>
		<!-- 		<scroll-view scroll-y class="page">
			<template v-for="key in processMap.keys()">
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class=" text-orange font-b">{{key}}</text>
					</view>
				</view>
				<view class="cu-list grid col-4 no-border">
				<view class="circle-button-box" @click="start(act)" v-for="(act, index) in processMap.get(key)" :key="index">
					<view class="cuIcon-calendar bg-blue text-white circle-button font-size-35"></view>
					<text class="ellipsis-description">{{act.name}}</text>
				</view>
				</view>
			</template>
			
			<view class="cu-tabbar-height"></view>
		</scroll-view>
			<view class="cu-tabbar-height"></view> -->
			<!-- scroll-y 滚动条 -->
			
		<scroll-view scroll-y class="page">
			<template >
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class=" text-orange font-b">设备运转情况</text>
				</view>
			</view>
			<view class="cu-list grid col-4 no-border">
				<view class="circle-button-box" @click="start(act)">
					<view class="cuIcon-calendar bg-blue text-white circle-button font-size-35"></view>
					<text class="ellipsis-description">A类设备运转情况</text>
				</view>
				<view class="circle-button-box" @click="start(act)">
					<view class="cuIcon-calendar bg-blue text-white circle-button font-size-35"></view>
					<text class="ellipsis-description">B类设备运转情况</text>
				</view>
				
			</view>
			</template>
			
		</scroll-view>
		<scroll-view scroll-y class="page">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class=" text-orange font-b">任务发布</text>
				</view>
			</view>
			<view class="cu-list grid col-4 no-border">
				
			</view>
		</scroll-view>
		<scroll-view scroll-y class="page">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class=" text-orange font-b">规章制度</text>
				</view>
			</view>
			<view class="cu-list grid col-4 no-border">
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	import pick from 'lodash.pick'
	import userSelect from '@/components/user-select/user-select.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件)
		props:{
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default(){
					return 0
				}
			},
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default(){
					return []
				}
			}
		},
		components:{
			userSelect,
			uniPopupMessage,
			uniPopupShare
		},
		data() {
			return {
				// upOption: {
				// 	noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
				// 	empty: {
				// 		tip: '~ 搜索无结果 ~' // 提示
				// 	}
				// },
				CustomBar: this.CustomBar,
				list: [], // 数据列表
				showSelectUserDialog: false,
				transferUserId: '',
				modalName: null,
				currentRow: null,
				curWord:"", //当前搜索关键词
				cardCur: 0,
				dataList: [],
				categoryList: [],
				processMap: new Map(),
				swiperList: [{
					id: 0,
					type: 'image',
					url: '/static/swiper/1.svg'
				}, {
					id: 1,
					type: 'image',
					url: '/static/swiper/2.svg'
				}, {
					id: 2,
					type: 'image',
					url: '/static/swiper/3.svg'
				}, {
					id: 3,
					type: 'image',
					url: '/static/swiper/4.svg'
				}, {
					id: 4,
					type: 'image',
					url: '/static/swiper/5.svg'
				}, {
					id: 5,
					type: 'image',
					url: '/static/swiper/6.svg'
				}, {
					id: 6,
					type: 'image',
					url: '/static/swiper/7.svg'
				}],
				dotStyle: false,
				towerStart: 0,
				direction: ''
			};
		},
		// async mounted() {

		// 	let res = await this.$http.get('/app/extension/actCategory/treeData')
		// 	let {
		// 		data
		// 	} = await this.$http.get('/app/flowable/process/list')
		// 	this.processMap = new Map()
		// 	res.data.treeData.forEach((item) => {
		// 		this.processMap.set(item.name, [])
		// 	})
		// 	let list = data.page.list
		// 	list.forEach((item) => {
		// 		if (this.processMap.has(item.category)) {
		// 			let list = this.processMap.get(item.category)
		// 			list.push(item)
		// 		} else {
		// 			//隐藏jeeplus自带的流程表单
		// 			// this.processMap.set(item.category, [item])
		// 		}
		// 	})

		// 	for (let [key, value] of this.processMap) {
		// 		console.log(key, value);
		// 	}


		// },
		// methods: {
		// 	toApplyList(mail) {
		// 		uni.navigateTo({
		// 			url: '/pages/workbench/task/ApplyList'
		// 		})
		// 	},
			// toTodoList(mail) {
			// 	uni.navigateTo({
			// 		url: '/pages/workbench/task/TodoList'
			// 	})
			// },
		// 	toHistoryList(mail) {
		// 		uni.navigateTo({
		// 			url: '/pages/workbench/task/HistoryList'
		// 		})
		// 	},
		// 	toFlowCopyList(mail) {
		// 		uni.navigateTo({
		// 			url: '/pages/workbench/task/FlowCopyList'
		// 		})
		// 	},
		// 	start(row) {
		// 		// 读取流程表单
		// 		this.$http.get('/app/flowable/task/getTaskDef', {
		// 			procDefId: row.id,
		// 			status: 'start'
		// 		}).then(({
		// 			data
		// 		}) => {
		// 			if (data.success) {
		// 				let query = {
		// 					procDefId: row.id,
		// 					procDefKey: row.key,
		// 					status: 'start',
		// 					title: `发起流程【${row.name}】`,
		// 					formType: data.flow.formType,
		// 					formUrl: data.flow.formUrl,
		// 					formTitle: `${row.name}`
		// 				}
		// 				uni.navigateTo({
		// 					url: '/pages/workbench/task/TaskForm?flow=' + JSON.stringify(query)
		// 				})
		// 			}
		// 		})
		// 	}
		
		// }
		methods: {
			toTodoList(mail) {
				uni.navigateTo({
					url: '/pages/apps/notification/notification'
				})
			},
		     claim (row) {
		        this.$http.post('/app/flowable/task/claim', {taskId: row.task.id}).then(({data}) => {
				   uni.showToast({ title: data.msg, icon: "success" });
		           // this.doSearch(this.curWord)
				   row.status = 'todo'
				   row.claimTime = new Date().getTime()
		        })
		      },
		      unclaim (row) {
		        this.$http.post('/app/flowable/task/unclaim', {taskId: row.task.id}).then(({data}) => {
					uni.showToast({ title: data.msg, icon: "success" });
					// this.doSearch(this.curWord)
					row.status = 'claim'
					row.claimTime = undefined
		        })
		      },
		      todo (row, index) {
				if(row.status === 'claim'){
					uni.showToast({ title: '请先签收任务!', icon: "none" });
					this.listTouchDirection = 'left'
					this.modalName = 'move-box-'+index
					return;
				}
		        this.$http.get('/app/flowable/task/getTaskDef', {
		          taskId: row.task.id,
		          taskName: row.task.name,
		          taskDefKey: row.task.taskDefinitionKey,
		          procInsId: row.task.processInstanceId,
		          procDefId: row.task.processDefinitionId,
		          status: row.status
		        }).then(({data}) => {
					let query = {formTitle: `${row.vars.title}`, title: `审批【${row.task.name || ''}】`, ...pick(data.flow, 'formType', 'formReadOnly', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')};
					uni.navigateTo({
					   url: '/pages/workbench/task/TaskForm?flow='+JSON.stringify(query)
					})
		        })
		      },
			// 输入监听
			inputWord(e){
				// this.curWord = e.detail.value // 已使用v-model,无需再次赋值
				// 节流,避免输入过快多次请求
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(()=>{
					this.doSearch(this.curWord)
				},300)
			},
			// 搜索
			doSearch(word){
				this.curWord = word
				this.list = []; // 先清空列表,显示加载进度
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				this.$http.get('/app/flowable/task/todo', {
					pageNo: page.num,
					pageSize: page.size,
					status: '1',
					title: this.curWord
					
				}).then(({data})=>{
					let curPageData = data.page.list
					this.mescroll.endBySize(curPageData.length,  data.page.count);
					//如果是第一页需手动制空列表
					if(page.num == 1) 
					this.list = [];
					//追加新数据
					this.list=this.list.concat(curPageData);
				}).catch(e=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
				
			},
			
			transferTaskDialog (row) {
				  this.showSelectUserDialog = true
				  this.currentRow = row
			 },
			hideSelectUserDialog () {
				this.showSelectUserDialog = false
			},
		  selectUsersToTransferTask () {
			this.$http.post('/app/flowable/task/delegate', {taskId:  this.currentRow.task.id, userId: this.transferUserId}).then(({data}) => {
			  uni.showToast({
			  	title:data.msg
			  })
			  this.doSearch(this.curWord)
			  this.showSelectUserDialog = false
			})
		  },
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > -60? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style>
	.cu-list.card-menu {
		overflow: hidden;
		margin-right: 5px;
		margin-left: 5px;
		border-radius: 7px;
	}

	.cu-list.card-menu.margin-top-20 {
		margin-top: -20px;
	}

	.cu-list.menu>.cu-item .content>uni-view:first-child {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		/* -webkit-align-items: center; */
		/* align-items: center; */
		display: inline-block;
		margin-right: 5px;
		width: 1.6em;
		text-align: center;
	}

	.font-size-35 {
		font-size: 35px !important;
	}

	.circle-button {
		width: 44px;
		height: 44px;
		border-radius: 18px;
		padding-top: 4px;
	}

	.circle-button-box {
		width: 25%;
		margin-top: 10px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.font-b {
		vertical-align: middle;
		font-size: 18px;
		font-weight: 500;
		color: #3a3a3a;
	}
	.size {
		vertical-align: middle;
		font-size: 13px;
		font-weight: 505;
		color: #3a3a3a;
	}
	.ellipsis-description {
		  font-size: 12px;
		  line-height: $line-height-base;
		  display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
		  -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
		  overflow: hidden; /*超出的文本隐藏*/
		  text-overflow: ellipsis; /* 溢出用省略号*/
		   -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
	}
	
	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 29px;
		width: calc(100% - 77px);
		line-height: 1.6em;
	}
	
	.cu-bar .search-form{
		background-color: white;
	}
	.cu-list>.cu-item .move {
	    width: 240px;
	}
	.cu-list>.cu-item.move-cur {
	    -webkit-transform: translateX(-240px);
	    transform: translateX(-240px);
	}
</style>
